<!--daterangepicker-->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>

<link href="/hotel/css/custom.css" rel="stylesheet">
<link href="/hotel/css/responsive.css" rel="stylesheet">
<link href="/hotel/css/helper.css" rel="stylesheet">

<div id="detailDiv">
    <div class="inner-banner inner-banner-bg pt-70 pb-40">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8 col-md-8 mb-30">
                    <!-- page-title -->
                    <div class="page-title">
                        <h1>{{hotel.hotelName}}</h1>
                    </div>
                    <!-- page-title end -->
                </div>
                <div class="col-lg-4 col-md-4 mb-30">
                    <!-- breadcrumb -->
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="/hotel/hotels">主页</a></li>
                        <li class="breadcrumb-item active">酒店详情</li>
                    </ol>
                    <!-- breadcrumb end -->
                </div>
            </div>
        </div>
    </div>
    <section class="section-paddings single-package-area" id="hotel_details">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-sm-12">
                    <div class="single-package-details">
                        <div class="single-package-title">
                            <span style="font-size: 30px;font-weight: bold;">{{hotel.hotelName}}</span>
                            <span>
                               <i class="fa fa-star" v-for="i in hotel.hotelStar" style=" color: #37b721;"></i>
                           </span>
                        </div>
                    </div>

                    <div class="package_banner">
                        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                            <ol class="carousel-indicators">
                                <li data-target="#carouselExampleIndicators" class="bg-primary"
                                    v-for="(item,index) in hotel.hotelDetail.detailImages" :data-slide-to="index"
                                    :class="[index==0?'active':'']">
                                </li>
                            </ol>
                            <div class="carousel-inner">
                                <div class="carousel-item"
                                     v-for="(item,index) in hotel.hotelDetail.detailImages"
                                     :class="[index==0?'active':'']" style="height: 300px;width:100%;overflow: hidden;">
                                    <img :src="item.image" class="d-block w-100" data-toggle="modal"
                                         data-target="#images" @click="showBigImage(item.image)">
                                </div>
                            </div>
                            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button"
                               data-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button"
                               data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                    </div>
                    <div class="package-tab-menu">
                        <ul class="package-tab-menu nav nav-tabs" id="myTab2" role="tablist">
                            <li role="presentation"><a href="#description" class="active" aria-controls="description"
                                                       role="tab" data-toggle="tab">房间</a></li>
                            <li role="presentation"><a href="#itinerary" aria-controls="itinerary" role="tab"
                                                       data-toggle="tab">政策</a></li>
                            <li role="presentation"><a href="#service" aria-controls="service" role="tab"
                                                       data-toggle="tab">设施与服务</a></li>
                            <li role="presentation"><a href="#reviews" aria-controls="reviews" role="tab"
                                                       data-toggle="tab">点评</a></li>
                        </ul>
                    </div><!-- tab menu end -->

                    <!-- tab content start -->
                    <div class="row">
                        <!-- tabs content -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane fade show active in" id="description">
                                <div class="row">
                                    <!-- left content -->
                                    <div class="col-md-12 col-sm-12">
                                        <div class="tour-description">
                                            <!--<div class="card mb-3 text-white bg-secondary"
                                                 v-for="item in hotel.hotelRooms">
                                                <div class="row no-gutters">
                                                    <div class="col-md-3 "
                                                         style="border: 1px solid gray;text-align: center;">
                                                        <img :src="item.hotelImages[0].image"
                                                             style="overflow: hidden; max-height:200px;">
                                                        <span>{{item.roomName}}</span>
                                                        <p style="padding-bottom: 0px;line-height: 15px; color: white">
                                                            <a data-toggle="modal" data-target="#detail"
                                                               @click="showDetail(item)"> 查看详情</a>
                                                        </p>

                                                    </div>
                                                    <div class="col-md-3"
                                                         style="border: 1px solid gray;text-align: center;">
                                                        <div class="card-body">
                                                            <div v-for="bed in item.beds">
                                                                <span>{{bed.bedNum}}</span>张
                                                                <span>{{bed.bedName}}</span>
                                                                <hr/>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3"
                                                         style="border: 1px solid gray;text-align: center;">
                                                        <div class="card-body">
                                                            <span>{{item.breakfastNum}}</span>份早餐
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3"
                                                         style="border: 1px solid gray;text-align: center;">
                                                        <div class="card-body">
                                                            <p style="color: white"><span>{{item.roomCost}}</span>元/晚
                                                            </p>
                                                            <span>{{item.payType}}</span>
                                                            <button class="btn btn-primary" data-toggle="modal"
                                                                    data-target="#order" @click="initOrder(item)">预定
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>-->
                                            <div class="list-box mb-30" v-for="item in hotel.hotelRooms">
                                                <div class="list-box-img"
                                                     style="height: 100%;width: 100%;overflow: hidden;">
                                                    <img :src="item.hotelImages[0].image">
                                                </div>
                                                <div class="list-box-content">
                                                    <div class="list-box-title">
                                                        <h3>{{item.roomName}}<span>{{item.roomCost}}<em>元/晚</em></span>
                                                        </h3>
                                                        <address>
                                                            <!--Max : 2 Persons-->
                                                        </address>
                                                    </div>
                                                    <ul class="hotel-featured"
                                                        style="font-size: 18px;font-weight: bold;">
                                                        <li v-for="bed in item.beds">
                                                            <span style="color:#31b675;">{{bed.bedNum}}</span>张{{bed.bedName}}
                                                        </li>
                                                        <li>
                                                            <span style="color:#31b675;">{{item.breakfastNum}}</span>份早餐
                                                        </li>
                                                    </ul>
                                                    <div class="btn-wrapper mt-20 d-inline-block"
                                                         style="float: right;">
                                                        <a class="view-detail-btn" href="javascript:void(0)"
                                                           @click="showDetail(item)" data-toggle="modal"
                                                           data-target="#detail">查看详情</a>
                                                        <a class="book-now-btn ml-6" @click="initOrder(item)"
                                                           href="javascript:void(0)" data-toggle="modal"
                                                           data-target="#order">预定</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div><!-- left-content -->

                                </div>
                            </div>

                            <div role="tabpanel" class="tab-pane fade" id="itinerary">
                                <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <div class="tour-description">
                                            <div class="main-timeline">
                                                <!-- single timeline -->
                                                <div class="timeline">
                                                    <div class="timeline-content left">
                                                        <span class="timeline-icon">1</span>
                                                        <h4>入住及退房</h4>
                                                        <p>入住时间：{{hotel.policy.check.checkInTime}}后</p>
                                                        <p>退房时间：{{hotel.policy.check.checkOutTime}}前</p>
                                                    </div>
                                                </div><!-- single timeline -->

                                                <div class="timeline">
                                                    <div class="timeline-content left">
                                                        <span class="timeline-icon">2</span>
                                                        <h4>入住</h4>
                                                        <p>入住方式：{{hotel.policy.checkType.checkTypeName}}</p>
                                                        <p>入住提示：{{hotel.policy.attention}}</p>
                                                    </div>
                                                </div>

                                                <div class="timeline">
                                                    <div class="timeline-content left">
                                                        <span class="timeline-icon">3</span>
                                                        <h4>儿童</h4>
                                                        <p v-if="hotel.policy.allowChild==0">允许携带儿童入住</p>
                                                        <p v-if="hotel.policy.allowChild==1">不允许携带儿童入住</p>
                                                    </div>
                                                </div>

                                                <div class="timeline">
                                                    <div class="timeline-content left">
                                                        <span class="timeline-icon">4</span>
                                                        <h4>加床</h4>
                                                        <div v-if="hotel.policy.addBed.allowAddBed==0">
                                                            <p>允许加床数量:{{hotel.policy.addBed.bedNum}}</p>
                                                            <p>每加一张床的价格:{{hotel.policy.addBed.bedCost}}元/张</p>
                                                            <p v-if="hotel.policy.addBed.breakfast==0">包含早餐</p>
                                                            <p v-if="hotel.policy.addBed.breakfast==1">不包含早餐</p>
                                                        </div>
                                                        <p v-if="hotel.policy.addBed.allowAddBed==1">
                                                            不允许加床
                                                        </p>
                                                    </div>
                                                </div>

                                                <div class="timeline">
                                                    <div class="timeline-content left">
                                                        <span class="timeline-icon">5</span>
                                                        <h4>早餐</h4>
                                                        <div v-if="hotel.policy.breakfast.offerBreakfast==0">
                                                            <p>早餐类型：<span
                                                                    v-for="item in hotel.policy.breakfast.breakfastTypes">{{item.breakfastType}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                                            </p>
                                                            <p>菜单类型：<span
                                                                    v-for="item in hotel.policy.breakfast.menuTypes">{{item.menuType}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                                            </p>
                                                            <p>早餐价格：{{hotel.policy.breakfast.breakfastCost}}元/位</p>
                                                            <p>营业时间：{{hotel.policy.breakfast.operateTime}}</p>
                                                        </div>
                                                        <p v-if="hotel.policy.breakfast.offerBreakfast==1">不提供早餐</p>
                                                    </div>
                                                </div>

                                                <div class="timeline">
                                                    <div class="timeline-content left">
                                                        <span class="timeline-icon">6</span>
                                                        <h4>停车</h4>
                                                        <p v-if="hotel.policy.parking.allow==0">
                                                            停车场地址:{{hotel.policy.parking.location}}</p>
                                                        <p v-if="hotel.policy.parking.allow==1">不允许停车</p>
                                                    </div>
                                                </div>

                                                <div class="timeline">
                                                    <div class="timeline-content left">
                                                        <span class="timeline-icon">7</span>
                                                        <h4>宠物</h4>
                                                        <p v-if="hotel.policy.pet==0">允许携带宠物入住</p>
                                                        <p v-if="hotel.policy.pet==1">不允许携带宠物入住</p>
                                                    </div>
                                                </div>

                                                <div class="timeline">
                                                    <div class="timeline-content left">
                                                        <span class="timeline-icon">8</span>
                                                        <h4>年龄限制</h4>
                                                        <p>本酒店只允许{{hotel.policy.limitAge}}岁以上的客人单独入住</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div role="tabpanel" class="tab-pane fade" id="service">
                                <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <h3>设施</h3>
                                        <div class="w-100">
                                            <!-- popular destination box -->
                                            <div class="popular-destination-box"
                                                 v-for="facility in hotel.facilityAndService.facilities">
                                                <div class="img-holder-overlay">
                                                    <div class="img-holder">
                                                        <img :src="facility.facilityImages[0].image" class="w-100"
                                                             alt=""></div>
                                                    <div class="overlay">
                                                        <a href="javascript:void(0)" data-toggle="modal"
                                                           data-target="#facilityImage"
                                                           @click="initFacilityImage(facility.facilityImages)">
                                                            <i class="fa fa-align-right"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="title">
                                                    <h3><a href="">{{facility.facilityName}}</a></h3>
                                                </div>
                                            </div>
                                            <!-- popular destination box end -->
                                        </div>

                                        <h3>服务</h3>
                                        <div class="side-about mb-30"
                                             style="margin-top: 30px;font-weight: bold;font-size: 18px;"
                                             v-for="service in hotel.facilityAndService.services">
                                            <p class="text-white mb-0">
                                                {{service.hServiceName}}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div role="tabpanel" class="tab-pane fade" id="reviews">
                                <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <div class="tour-description">
                                            <div class="comment-list-items">
                                                <div class="comment-list-wrapper" v-for="order in hotel.hotelOrders">
                                                    <div v-if="order.comment!==null">
                                                        <div class="comment-list">
                                                            <div class="commnet_img">
                                                                <img :src="order.user.userImage" alt="member img"
                                                                     class="img-fluid">
                                                            </div>
                                                            <div class="comment-text">
                                                                <div class="author_info">
                                                                    <div class="author_name">
                                                                        <a href="javascript:void(0)" class="">{{order.user.userName}}</a>
                                                                        <span>{{order.time}}</span>
                                                                    </div>
                                                                    <div class="reply-comment"
                                                                         v-if="order.comment.comment==null&&show">
                                                                        <a href="javascript:void(0)" title=""
                                                                           data-toggle="modal" data-target="#comment"
                                                                           @click="initComment(order.comment.commentId)">
                                                                            <i class="fa fa-bell"></i> 回复</a>
                                                                    </div>
                                                                </div>
                                                                <p>{{order.comment.detail}}</p>
                                                            </div>
                                                        </div>
                                                        <div class="comment-list reply_comment_text"
                                                             v-if="order.comment.comment!==null">
                                                            <div class="comment-text">
                                                                <div class="author_name">
                                                                    <b href="javascript:void(0)" class="">商家回复</b>
                                                                </div>
                                                                <p>{{order.comment.comment.detail}}</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div><!-- video tab content end -->
                        </div><!-- tabs content-->
                    </div><!-- tab content end -->
                </div>


                <div class="col-md-4 col-sm-12">
                    <aside>
                        <div class="help-us mb-30">
                            <h3>需要帮助？</h3>
                            <p>点击下方按钮获取联系方式，联系我们吧</p>
                            <a class="view-detail-btn" href="javascript:void(0)" data-toggle="modal"
                               data-target="#contact">
                                <i class="fas fa-phone-alt"></i>
                                联系酒店
                            </a>
                        </div>
                        <div>
                            <ul style="font-size: 18px;">
                                <li>
                                    <i class="fa fa-map-marker"></i>
                                    <span style="font-weight: bold;">地址:</span>
                                    <span style="color: #31b675;">{{hotel.location}}</span>
                                    <a data-toggle="modal" data-target="#exampleModal">显示地图</a>
                                </li>
                                <li>
                                    <i class="fa fa-calendar"></i>
                                    <span style="font-weight: bold;">开业年份：</span>
                                    <span style="color: #31b675;">{{hotel.hotelDetail.startingYear}}</span>
                                </li>
                                <li>
                                    <i class="fa fa-calendar-o"></i>
                                    <span style="font-weight: bold;">装修时间：</span>
                                    <span style="color: #31b675;">{{hotel.hotelDetail.decoratedYear}}</span>
                                </li>
                                <li>
                                    <i class="fa fa-hotel"></i>
                                    <span style="font-weight: bold;">客房数量：</span>
                                    <span style="color: #31b675;">{{hotel.hotelDetail.roomNumber}}</span>
                                </li>

                                <li>
                                    <i class="fa fa-university"></i>
                                    <span style="font-weight: bold;">酒店简介:</span>
                                    <pre style="color: #31b675;">{{hotel.hotelDetail.detailDetail}}</pre>
                                </li>
                            </ul>
                        </div>

                    </aside>
                </div>
            </div>
        </div>
    </section>
    <!--地图-->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div id="container"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!--房间详情-->
    <div class="modal fade" id="detail" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"
         style="background-color: black;color: white;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item" v-for="(item,index) in detail.hotelImages"
                                 :data-slide-to="index"
                                 :class="[index==0?'active':'']">
                                <img :src="item.image" class="d-block w-100">
                            </div>
                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleControls" role="button"
                           data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleControls" role="button"
                           data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                    <p style="font-size: 20px;font-weight: bold;">
                        {{detail.roomDetail}}
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!--酒店联系方式-->
    <div class="modal fade" id="contact" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body" style="font-size: 18px;">
                    <i class="fa fa-user"></i>
                    <span style="font-weight: bold;">联系人姓名：</span>
                    <span style="color: #31b675;">{{hotel.hotelDetail.contactName}}</span>
                    <br>
                    <i class="fa fa-phone"></i>
                    <span style="font-weight: bold;">联系电话：</span>
                    <span style="color: #31b675;">{{hotel.hotelDetail.contactPhone}}</span>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!--图片大图-->
    <div class="modal fade" id="images" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="jumbotron jumbotron-fluid">
                    <div class="container">
                        <img :src="image" class="d-block w-100">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!--订单-->
    <div class="modal fade" id="order" tabindex="-1" aria-labelledby="exampleModalScrollableTitle"
         style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalScrollableTitle">住客资料</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div>
                        <h5>入住人信息</h5>
                        <div class="form-group">
                            <label for="orderName">住客姓名</label>
                            <input type="text" class="form-control" id="orderName" placeholder="请填写住客姓名，如有多位客人入住只填一位即可"
                                   v-model:value="order.orderName">
                        </div>
                        <div class="form-group">
                            <label for="phone">手机号</label>
                            <input type="number" class="form-control" id="hotelContactPhone" placeholder="请填写您的手机号码"
                                   v-model:value="order.phone">
                        </div>
                    </div>
                    <div>
                        <h5>入住日期</h5>
                        <input type="text" name="daterange" placeholder="请选择入住时间"/>
                    </div>
                    <div>
                        <h5>特别要求</h5>
                        <div class="form-group">
                            <textarea type="text" class="form-control" id="spe" placeholder="请填写特别要求"
                                      v-model:value="order.specially">
                            </textarea>
                        </div>
                    </div>
                    <div>
                        <h5>价格</h5>
                        <pre style="float: right;font-size: 30px;font-weight: bold;color: red;">{{price*order.date}}</pre>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" id="cancel">取消</button>
                    <button type="button" class="btn btn-primary" onclick="checkOrder()">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!--设施大图-->
    <div class="modal fade" id="facilityImage" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"
         style="background-color: black;color: white;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div id="carouselExampleControls1" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item" v-for="(item,index) in facilityImage"
                                 :data-slide-to="index"
                                 :class="[index==0?'active':'']">
                                <img :src="item.image" class="d-block w-100">
                            </div>
                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleControls1" role="button"
                           data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleControls1" role="button"
                           data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 评论 -->
    <div class="modal fade" id="comment" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="commentModalLabel">评论</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div>
                        <h5>请对此评价进行回复</h5>
                        <div class="form-group">
                            <textarea rows="5" class="form-control" id="hotelDetail" placeholder="请填写您的评论"
                                      v-model:value="comment.detail">
                             </textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="insertComment()">提交</button>
                </div>
            </div>
        </div>
    </div>

    <a onclick="window.history.back(-1);" style="position: fixed;bottom: 10px;left: 30px;">
        <i class="fa fa-undo" style="font-size: 40px;"></i>
        返回上一页
    </a>
</div>

<!--高德地图-->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=fa89861b3f18b12b40dd4d9b828090bc"></script>

<!--daterangepicker-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<style>
    #container {
        width: 100%;
        height: 600px;
    }

    pre {
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        font-size: 18px;
    }

    .modal-dialog {
        max-width: 80%;
        margin: 1.75rem auto;
    }
</style>

<script>
    var detailVue = new Vue({
        el: "#detailDiv",
        data: {
            hotel: {
                hotelDetail: {
                    detailImages: []
                },
                policy: {
                    addBed: {
                        addBedId: 0,
                        allowAddBed: 0,
                        bedCost: 0,
                        bedNum: 0,
                        breakfast: 0,
                    },
                    allowChild: 0,
                    attention: "",
                    breakfast: {
                        breakfastCost: 0,
                        breakfastId: 0,
                        breakfastTypes: [],
                        menuTypes: [],
                        offerBreakfast: 0,
                        operateTime: "",
                    },
                    check: {
                        checkId: 0,
                        checkInTime: "",
                        checkOutTime: "",
                    },
                    checkType: {
                        checkTypeId: 0,
                        checkTypeName: ""
                    },
                    limitAge: 0,
                    parking: {
                        allow: 0,
                        location: "",
                        parkingId: 0
                    },
                    pet: 0,
                    policyId: 0,
                },
                facilityAndService: {
                    facilities: [],
                    services: []
                },
            },
            detail: {},
            image: "",
            order: {
                roomId: "",
                orderName: "",
                phone: "",
                checkIn: "",
                checkOut: "",
                specially: "",
                userId: "",
                price: "",
                date: 1,
                hotelMain: {
                    hotelMainId: "",
                }
            },
            price: "",
            facilityImage: [],
            show: false,
            comment: {
                id: "",
                pid: "",
                detail: "",
            }
        },
        methods: {
            initDetail: function () {
                var self = this;
                var hotelId = sessionStorage.getItem("hotelId");
                $.ajax({
                    url: "/api/hotelMains/v4/" + hotelId,
                    type: "get",
                    async: true,
                    success: function (rs) {
                        self.hotel = rs;
                        console.log(rs);
                        self.map();
                        if (parseInt(hotelId) === parseInt($("#userId").val())) {
                            self.show = true;
                        }
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                })
            },
            map: function () {
                var self = this;
                //地图加载
                var map = new AMap.Map("container", {
                    center: [self.hotel.longitude, self.hotel.latitude],
                    zoom: 13,//级别
                    resizeEnable: true
                });
                var marker = new AMap.Marker({
                    position: [self.hotel.longitude, self.hotel.latitude]//位置
                })
                map.add(marker);//添加到地图
            },
            showDetail: function (item) {
                var self = this;
                self.detail = item;
            },
            showBigImage: function (url) {
                var self = this;
                self.image = url;
            },
            initOrder: function (item) {
                var self = this;
                console.log(item);
                self.price = item.roomCost;
                self.order.roomId = item.roomId;
                self.order.userId = $("#userId").val();
            },
            initTime: function () {
                var self = this;
                $('input[name="daterange"]').daterangepicker({
                    opens: 'left',
                    "locale": {
                        format: 'YYYY/MM/DD',
                        applyLabel: '确定',
                        cancelLabel: '取消',
                        fromLabel: '起始时间',
                        toLabel: '结束时间',
                        customRangeLabel: '自定义',
                        daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                            '七月', '八月', '九月', '十月', '十一月', '十二月'],
                        firstDay: 1
                    }
                }, function (start, end, label) {
                    self.order.checkIn = start.format('YYYY-MM-DD');
                    self.order.checkOut = end.format('YYYY-MM-DD');
                    var startDate = Date.parse(self.order.checkIn);
                    var endDate = Date.parse(self.order.checkOut);
                    var days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000);
                    self.order.date = days;
                });
            },
            checkOrder: function () {
                var self = this;
                var pReg = /^0?(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/;
                if (self.order.orderName === "") {
                    layer.alert("住客姓名不能为空", {icon: 0});
                } else if (self.order.phone === "") {
                    layer.alert("手机号不能为空", {icon: 0});
                } else if (!pReg.test(self.order.phone)) {
                    layer.alert("手机号格式不正确", {icon: 0});
                } else if (self.order.checkIn === "" || self.order.checkOut === "") {
                    layer.alert("请选择入住时间", {icon: 0});
                } else {
                    console.log(self.order);
                    self.order.price = self.price * self.order.date;
                    self.order.hotelMain.hotelMainId = sessionStorage.getItem("hotelId");
                    $.ajax({
                        url: "/api/hotelOrder",
                        type: "post",
                        contentType: "application/json",
                        data: JSON.stringify(self.order),
                        success: function (rs) {
                            if (rs.status === 200) {
                                layer.alert("提交成功", {icon: 0});
                                self.order = {
                                    roomId: "",
                                    orderName: "",
                                    phone: "",
                                    checkIn: "",
                                    checkOut: "",
                                    specially: "",
                                    userId: "",
                                    price: "",
                                    date: 1
                                },
                                    $("#cancel").click();
                            } else {
                                layer.alert(rs.message, {icon: 0});
                            }
                        },
                        error: function (rs) {
                            layer.alert(rs.responseText, {icon: 0});
                        }
                    })
                }
            },
            initFacilityImage: function (images) {
                var self = this;
                self.facilityImage = images;
            },
            initComment: function (id) {
                var self = this;
                self.comment.pid = id;
            },
            insertComment: function () {
                var self = this;
                $.ajax({
                    url: "/api/comment",
                    type: "post",
                    contentType: "application/json",
                    data: JSON.stringify(self.comment),
                    success: function (rs) {
                        if (rs.status === 200) {
                            layer.alert("回复成功", {icon: 0});
                            setTimeout(
                                window.location.reload(), 3000
                            );

                        } else {
                            layer.alert(rs.message, {icon: 0});
                        }
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                })
            }
        },
        created: function () {
            window.checkOrder = this.checkOrder;
            window.insertComment = this.insertComment;
        },
        mounted: function () {
            this.initDetail();
            this.initTime();
        }
    })
</script>